{% extends 'antiques/base.html' %}

{% block title %}古韵堂简介 - 古董展示{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <div class="mb-3">
            <h2 class="h4 mb-3">古韵堂简介</h2>
            <p class="text-muted">古韵堂是聚焦明清瓷器的私人收藏艺术空间，以景德镇官窑珍品为核心，系统呈现青花、粉彩、珐琅彩及单色釉瓷的艺术精髓。展厅精选明清宫廷御用瓷器，如釉色莹润如脂的雍正粉彩、纹饰繁复的乾隆转心瓶，通过定制灯光与园林式展陈设计，凸显瓷器釉色流动之美与造型巧思。其展品不仅涵盖"苏麻离青"料勾勒的明代青花，更以康熙豇豆红、霁蓝釉等单色釉瓷诠释东方美学至简之境，在当代空间中续写"泥土与火焰共舞"的文明诗篇。</p>
        </div>
    </div>
    <div class="col-md-4 text-center">
        <img src="/media/cangjia.jpg" alt="藏家照片" class="img-fluid rounded shadow-sm" style="max-height: 200px;">
    </div>
</div>

<div class="container py-5">
    <div class="text-center mb-5">
        <h1 class="display-4 mb-3">古韵堂藏品</h1>
        <p class="lead text-muted">探索历史瑰宝，感受文化魅力</p>
    </div>

    <div class="row g-4">
        {% for antique in antiques %}
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm">
                <div class="card-img-top">
                    {% with first_image=antique.images.first %}
                    {% if first_image %}
                    <a href="{% url 'antiques:detail' antique.id %}">
                        <img src="{{ first_image.thumbnail.url }}" alt="{{ antique.name }}" class="img-fluid">
                    </a>
                    {% else %}
                    <div class="no-image">
                        <i class="bi bi-image"></i>
                        <p>暂无图片</p>
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
                <div class="card-body d-flex flex-column">
                    <h3 class="card-title h5 mb-3">
                        <a href="{% url 'antiques:detail' antique.id %}" class="text-decoration-none text-dark">{{ antique.name }}</a>
                    </h3>
                    <div class="mb-3">
                        <span class="badge bg-primary me-1">{{ antique.get_dynasty_display }}</span>
                        <span class="badge bg-info text-dark me-1">{{ antique.get_process_display }}</span>
                        <span class="badge bg-warning text-dark me-1">{{ antique.get_shape_display }}</span>
                        <span class="badge bg-secondary me-1">{{ antique.get_kiln_display }}</span>
                        <span class="badge bg-danger">{{ antique.get_condition_display }}</span>
                    </div>
                    {% if antique.size %}
                    <p class="text-muted mb-3"><i class="bi bi-rulers"></i> {{ antique.size }}</p>
                    {% endif %}
                    {% if antique.description %}
                    <p class="description mb-3 text-muted" style="height: 4.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;">{{ antique.description }}</p>
                    {% endif %}
                    <div class="mt-auto">
                        <p class="price mb-0" style="font-family: 'SimSun', 'STSong', serif; font-size: 1.5rem; color: #c00; font-weight: bold;">藏家特惠价：¥{{ antique.price }}</p>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info text-center">
                <i class="bi bi-info-circle"></i> 暂无藏品展示
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- 分页控件 -->
{% if page_obj.has_other_pages %}
<nav aria-label="Page navigation" class="mt-4">
  <ul class="pagination justify-content-center">
    {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </span>
      </li>
    {% endif %}
    {% for num in page_obj.paginator.page_range %}
      {% if page_obj.number == num %}
        <li class="page-item active"><span class="page-link">{{ num }}</span></li>
      {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
        <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
      {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </span>
      </li>
    {% endif %}
  </ul>
</nav>
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
    .card {
        transition: transform 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .card-img-top {
        height: 250px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
    }
    .card-img-top img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .no-image {
        text-align: center;
        padding: 2rem;
    }
    .no-image i {
        font-size: 3rem;
        color: #dee2e6;
    }
</style>
{% endblock %} 